<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        * {
            padding: 0;
            margin: 0;
        }
        
        .w {
            width: 1200px;
            margin: 20px auto;
        }
        
        #father {
            width: 100%;
            height: 500px;
            border: 2px solid blue;
            text-align: center;
        }
        
        #hear {
            width: 100%;
            height: 100px;
            line-height: 100px;
            background-color: aqua;
        }
        
        #hear>h1 {
            margin-left: 50px;
            text-align: left;
        }
        
        #search {
            text-align: center;
            border: none;
            outline: none;
            width: 97%;
            height: 30px;
            margin-top: 10px;
            border: 2px solid aqua;
        }
        
        #but {
            width: 97%;
            height: 50px;
            background-color: lawngreen;
            margin-top: 10px;
            border: none;
            outline: none;
            box-shadow: 0 2px 10px 0px rebeccapurple;
        }
        
        table {
            margin: 20px auto;
            border-collapse: collapse;
            text-align: center;
        }
        
        td {
            width: 200px;
            border: 1px solid palegreen;
        }
    </style>

</head>

<body>
    <div class="w">

        <div id="father">
            <div id="hear">
                <h1>天气查询<span id="msg"></span></h1>
            </div>
            <input id="search" type="text" placeholder="城市姓名">
            <button id="but">获取数据</button>

            <table id="ta">

            </table>

        </div>

    </div>


</body>

<script>
    function download(data) {
        var msg = document.getElementById('msg');
        msg.style.fontSize = '16px';
        msg.innerText = '\t\t城市:' + data.city + 'pm25值数:' + data.pm25;
        var str = ' <tr><td>日期</td><td>天气</td><td>风向</td><td>温度</td></tr>';
        var s;
        for (var i = 0; i < data.weather.length; i++) {
            s = ' <tr><td>' + data.weather[i].date + '</td><td>' + data.weather[i].weather + '</td><td>' + data.weather[i].wind + '</td><td>' + data.weather[i].temp + '</td></tr>';
            str += s;
        }
        var ta = document.getElementById('ta');
        ta.innerHTML = str;
        // alert(JSON.stringify(data));
    };
    /* but.onclick = function() {
        var oScript = document.createElement('script');
        oScript.src = 'https://api.asilu.com/weather/?city=%E6%B7%B1%E5%9C%B3&callback=dowload';
        document.body.append(oScript);
        
        var xhr = new XMLHttpRequest();

        xhr.open('post', 'https://api.asilu.com/weather', true);

        xhr.send();
        xhr.onreadystatechange = function() {
            if (xhr.readyState == 4) {
                console.log(xhr.responseText);
            }
        } 
    }
     */
    var but = document.getElementById('but');
    var search = document.getElementById('search');
    but.onclick = function() {
        var oScript = document.createElement('script');
        oScript.src = 'https://api.asilu.com/weather/?city=' + search.value + '&callback=download';
        document.body.append(oScript);

    }
</script>

</html>